<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/webbase.css">
    <link rel="stylesheet" href="css/pages-seckillOrder.css">
    <title>个人信息</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>
<div id="app">
    <!--引入头部-->
    <div id="header">
    </div>
    <div class="container-fluid">
        <!--header-->
        <div id="account">
            <div class="py-container">
                <div class="yui3-g home">
                    <!--左侧列表-->
                    <!--左侧列表-->
                    <div class="yui3-u-1-6 list">

                        <div class="person-info">
                            <div class="person-photo" style="text-align: center">
                                <img v-if="user.pic!=null" :src="user.pic" width="160px" class="img-circle" alt="">
                                <img v-if="user.pic==null" src="/img/girl.png" width="160px" class="img-circle" alt="">
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="list-items">
                            <dl>
                                <dt><i>·</i> 设置</dt>
                                <dd><a href="home_index.html">个人信息</a></dd>
                                <dd><a href="home_pic.html">上传头像</a></dd>
                                <dd><a href="home_address.html">地址管理</a></dd>
                            </dl>
                            <dl>
                                <dt><i>·</i> 订单中心</dt>
                                <dd><a href="home_orderlist.html">我的订单</a></dd>
                                <dd><a href="javascript:">待付款</a></dd>
                                <dd><a href="javascript:">待发货</a></dd>
                                <dd><a href="javascript:">待收货</a></dd>
                                <dd><a href="javascript:">待评价</a></dd>
                            </dl>
                            <dl>
                                <dt><i>·</i> 我的中心</dt>
                                <dd><a href="javascript:">我的收藏</a></dd>
                                <dd><a href="javascript:">我的足迹</a></dd>
                            </dl>
                            <dl>
                                <dt><i>·</i> 物流消息</dt>
                            </dl>

                        </div>
                    </div>
                    <!--右侧主内容-->
                    <div class="yui3-u-5-6 order-pay">
                        <div class="body userInfo">
                            <ul class="sui-nav nav-tabs nav-large nav-primary ">
                                <li class="active"><a href="#one" data-toggle="tab">基本资料</a></li>
                            </ul>
                            <form action="" method="post" enctype="multipart/form-data">
                                <div class="tab-content ">
                                    <div id="one" class="tab-pane active">
                                        <div class="sui-form form-horizontal">
                                            <div class="control-group">
                                                <label for="inputName" class="control-label">昵称：</label>
                                                <div class="controls">
                                                    <input type="text" id="inputName" v-model="user.nickname" name="nickname" placeholder="昵称">
                                                    <input type="hidden"  >
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">性别：</label>
                                                <div class="controls">

                                                    <input type="radio" name="sex" v-model="user.sex" value="1"><b>男</b>
                                                    &nbsp;&nbsp;
                                                    <input type="radio" name="sex" v-model="user.sex" value="0"><b>女</b>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">生日：</label>
                                                <div class="controls">
                                                    <input type="text"  name="birthday" v-model="user.birthday" placeholder="生日">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">邮箱：</label>
                                                <div class="controls">
                                                    <input type="text" name="email" v-model="user.email" placeholder="邮箱">
                                                </div>
                                            </div>
                                            <div class="control-group">

                                                <div class="controls">
                                                    <button type="button" @click="update()" class="sui-btn btn-primary">更新</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--导入底部-->
<div id="footer">
</div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script type="module">

        new Vue({
            el:"#app",
            data:{
                user:{}//初始化用户对象，接受服务端返回的用户信息
            },
            methods:{
                //查询用户信息
                findUser(){
                    axios.get("/user?action=checkUserLogin").then(
                        resp=>{
                            if(resp.data!="1"){
                                //用户登录了，需要接受登录用户信息
                                this.user=resp.data;
                            }
                        }
                    );
                },
                //更新用户信息
                update(){
                    //发送ajax请求，更新用户信息
                    axios.post("/user?action=updateUser",this.user).then(
                        resp=>{
                            if("ok"==resp.data){
                                alert("修改用户信息成功");
                                //查询用户信息
                                this.findUser();
                            }
                        }
                    );
                }
            },
            created(){
                //进入页面后，就需要校验用户登录状态，可以在钩子函数中完成
                this.findUser();
            }
        })
    </script>
</html>
